<template>
  <div class="home">
    <div class="home-box">
      <!-- 首页搜索栏 -->
      <div class="home-search" :class="{background:i!==0}">
        <img class="category-icon" @click="menu" src="../../../public/images/category.png" alt />
        <div class="search-wrap">
          <img
            style="width: 20px;height: 15px;margin: 0 8px 0 15px;"
            src="../../../public/images/jd.png"
            alt
          />
          <p style="height:30px;line-height:30px">|</p>
          <img
            style="width: 25px;height: 25px;margin-left:8px;"
            src="../../../public/images/search.png"
            alt
          />
          <input class="input" type="text" @click="tosearch" placeholder="烧烤炉" />
        </div>
        <div class="enter" @click="enter">登录</div>
      </div>
      <!-- 首页轮播图 -->
      <div ref="search" id="search">
        <swiper :options="swiperOption" ref="mySwiper">
          <!-- slides -->
          <swiper-slide>
            <img class="swiper-img" src="images/home1.jpg" alt />
          </swiper-slide>
          <swiper-slide>
            <img class="swiper-img" src="images/home2.jpg" alt />
          </swiper-slide>
          <swiper-slide>
            <img class="swiper-img" src="images/home3.jpg" alt />
          </swiper-slide>
          <swiper-slide>
            <img class="swiper-img" src="images/home4.jpg" alt />
          </swiper-slide>
          <swiper-slide>
            <img class="swiper-img" src="images/home5.jpg" alt />
          </swiper-slide>
          <swiper-slide>
            <img class="swiper-img" src="images/home6.jpg" alt />
          </swiper-slide>
          <swiper-slide>
            <img class="swiper-img" src="images/home7.jpg" alt />
          </swiper-slide>
          <swiper-slide>
            <img class="swiper-img" src="https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/82253/22/1272/123017/5cf7cf91E2ba8450c/581b1de4e72eb1af.jpg!cr_1125x549_0_72!q70.jpg.dpg" alt />
          </swiper-slide>
          <!-- Optional controls -->
          <div class="swiper-pagination" id="my-point" slot="pagination"></div>
        </swiper>
      </div>
      <home-button></home-button>

      <!-- 京东秒杀 -->
    </div>
    <second-sell></second-sell>
    <!-- 新人专享 -->
    <div class="new-peoper">
      <img
        src="https://m.360buyimg.com/mobilecms/s376x240_jfs/t1/37103/7/7876/115887/5ccff8bfE320f1d7b/147aad3576c76277.png!q70.jpg.dpg"
        alt
      />
      <img
        src="https://m.360buyimg.com/mobilecms/s376x240_jfs/t1/32449/33/15631/174497/5cc2d86bE0289110c/9c53e25651659d43.png!q70.jpg.dpg"
        alt
      />
    </div>

    <!-- 东家小院 -->
    <div class="east-yard">
      <img
        style="width:100%;vertical-align: top;"
        src="https://m.360buyimg.com/mobilecms/s750x80_jfs/t1/80458/35/2250/24646/5d09044cEb3c6b467/e1af43a6ea0cb5fa.png!q70.jpg.dpg"
        alt
      />
      <div class="yard">
        <div class="yard-wrap" style="border-right: 1px solid #f5f5f5;">
          <div class="yard-wrap">
            <p class="big-title">宝藏女孩</p>
            <p class="small-title">每个女孩都是宝藏</p>
          </div>
          <div class="yard-img">
            <img
              src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/36700/19/3880/275213/5cb9c6b5Edcfe1f06/4196990aef0f2998.jpg!q70.jpg.dpg"
              alt
            />
            <img
              src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t30469/301/1353751702/115820/f94d3168/5cde4d19N5b4af39a.jpg!q70.jpg.dpg"
              alt
            />
          </div>
        </div>
        <div class="yard-wrap">
          <div class="yard-wrap">
            <p class="big-title">逆龄秀发</p>
            <p class="small-title">发丝肌肤减龄秘诀</p>
          </div>
          <div class="yard-img">
            <img
              src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/30275/13/11009/348484/5cb3fbefE4c8b8083/8cec1384c552f1c5.jpg!q70.jpg.dpg"
              alt
            />
            <img
              src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/57960/35/1593/58669/5cf5e750Eef572761/2cc61e034056242d.jpg!q70.jpg.dpg"
              alt
            />
          </div>
        </div>
        <small-card v-for="(prop,index) in list.Yard" :key="index" :item="prop"></small-card>
      </div>
    </div>
    <!-- 每日逛 -->

    <div class="east-yard">
      <img
        style="width:100%;vertical-align: top;"
        src="https://m.360buyimg.com/mobilecms/s750x80_jfs/t1/39486/28/9224/23804/5d09048aE5127de40/eec779757a34e94d.png!q70.jpg.dpg"
        alt
      />
      <div class="yard">
        <small-card v-for="(item,index) in list.EveryDate" :key="index" :item="item" :index="index"></small-card>
      </div>
    </div>
    <!-- 京东快报 -->
    <jd-news></jd-news>

    <!-- 为你推荐 -->

    <div class="recommend">
      <img
        class="recommend-img"
        src="https://img11.360buyimg.com/jdphoto/jfs/t1/31601/22/15554/14040/5cc2a86fEbdb1098b/88174b36f85283b6.png"
        alt
      />
      <div class="floor-container">
        <floor-card v-for="(item,index) in FloorCardList" :FloorCardList="FloorCardList" :key="index" :index="index" :item="item"></floor-card>
      </div>
    </div>
    <!-- 点击继续加载 -->
    <div class="more-load">点击继续加载</div>

    <!-- 底部功能栏 -->

    <div class="mCommonFooter">
      <div class="function">
        <div @click="enter">登录</div>
        <span @click="enter">|</span>
        <div>注册</div>
        <span>|</span>
        <div>客户服务</div>
        <span>|</span>
        <div @click="back">返回顶部</div>
      </div>
      <div class="device">
        <div>
          <img
            src="https://m.360buyimg.com/mobilecms/jfs/t16423/186/2517573622/5186/75a541f7/5ab1c0deN947bdcba.png"
            alt
          />
        </div>
        <div>
          <img
            src="https://m.360buyimg.com/mobilecms/jfs/t18550/294/898388074/6574/3a8c5413/5ab0b8e9Ne9c48331.png"
            alt
          />
        </div>
        <div>
          <img
            src="https://m.360buyimg.com/mobilecms/jfs/t14581/218/2689195961/4696/203b872a/5ab1c0f2N51c3f1bb.png"
            alt
          />
        </div>
      </div>
      <div class="annotation">Copyright © 2004-2018 京东JD.com 版权所有</div>
    </div>
    <!-- 回到顶部 -->
    <div class="goto-top" v-show="i<=-800" @click="back">
      <img style="width:100%;height:100%" src="images/goto-top.png" alt />
    </div>
    <foot-list></foot-list>
  </div>
</template>

<script>
import FloorCard from "../widgets/FloorCard";
import JDnews from "../widgets/JDnews.vue";
import axios from "axios";
import SmallCard from "../widgets/SmallCard.vue";
import SecondSell from "../widgets/SecondSell.vue";
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import Foot from "../foot/Foot.vue";
import HomeButton from "../widgets/HomeButton.vue";
export default {
  name: "home",
  components: {
    "foot-list": Foot,
    "second-sell": SecondSell,
    swiper,
    swiperSlide,
    "home-button": HomeButton,
    "small-card": SmallCard,
    "jd-news": JDnews,
    "floor-card": FloorCard
  },
  data() {
    return {
      i: 0,
      FloorCardList: [],
      list: {},
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 2000,
          disableOnInteraction: false
        },
        pagination: {
          el: ".swiper-pagination",
          bulletActiveClass: "my-bullet-active"
        }
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },

  mounted() {
    this.swiper.slideTo(3, 1000, false);
    let that = this;
    axios.get("data/smallCard.json").then(function(response) {
      that.list = response.data;
    });
    axios.get("data/FloorCard.json").then(function(res) {
      that.FloorCardList = res.data.result;
    });
    window.addEventListener("scroll", this.handleScroll);
  },

  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },

  methods: {
    tosearch() {
      this.$router.push("/search");
    },
    menu() {
      this.$router.push("/category");
    },
    enter() {
      this.$router.push("/login");
    },
    handleScroll() {
      this.i = this.$refs.search.getBoundingClientRect().top;
    },
    back() {
      document.documentElement.scrollTop = document.body.scrollTop = 0;
    }
  }
};
</script>

<style>
.goto-top {
  position: fixed;
  bottom: 80px;
  right: 9px;
  width: 38px;
  height: 38px;
}
.annotation {
  text-align: center;
  color: #848689;
  font-size: 1.86667vw;
  padding: 2vw 0;
}
.device {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid #e5e5e5;
}
.device img {
  width: 16vw;
  vertical-align: middle;
}
.function {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  justify-content: space-around;
  border-bottom: 1px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;
  padding: 4.26667vw 5.33333vw;
}
.function div {
  color: #848689;
  font-size: 3.73333vw;
}
.function span {
  line-height: 100%;
}
.more-load {
  background-color: #f6f6f6;
  color: #686868;
  line-height: 32px;
  font-size: 14px;
  text-align: center;
}
.background {
  background-color: #e43130;
}
.floor-container {
  margin: 0 11px;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.recommend {
  width: 100%;
  background-color: #f6f6f6;
  padding-top: 8.8px;
}
.recommend-img {
  width: 100%;
  vertical-align: top;
}
.yard-img {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 0 15px;
}
.small-title {
  color: #666771;
  font-size: 12px;
  width: 100%;
  margin-left: 10px;
  height: 12px;
  white-space: nowrap;
}
.yard-img img {
  width: 50%;
  height: 100%;
  padding: 6px 0 0 7.7px;
  vertical-align: top;
}
.big-title {
  /* color: #1471fb; */
  font-weight: 700;
  width: 100%;
  margin-left: 10px;
  font-size: 18px;
  background: linear-gradient(90deg, #45caff, #1471fb);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.yard {
  margin: 0 11px;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  flex-wrap: wrap;
  border-radius: 8px;
  /* border: red solid 1px; */
  background-color: #fff;
}
.yard-wrap {
  width: 50%;
}
.east-yard {
  width: 100%;
  background-color: #f6f6f6;
}
.new-peoper {
  width: 100%;
  padding: 0 11px;
  /* position: relative; */
  background-color: #f6f6f6;
  top: 163px;
}
.new-peoper img {
  width: 50%;
}
.home-box {
  overflow: auto;
  background-color: #f6f6f6;
}
.home-box::-webkit-scrollbar {
  display: none;
}
.input {
  /* flex-grow: 1; */
  flex-shrink: 0;
  height: 100%;
  border: none;
  outline: none;
  /* width: 100% */
}
.enter {
  margin: 0 10px;
  color: #fff;
  font-size: 14px;
  width: 40px;
  height: 44px;
  text-align: center;
  line-height: 44px;
}
.search-wrap {
  background-color: #fff;
  flex-grow: 1;
  margin-left: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* border: red solid 1px; */
  border-radius: 15px;
  height: 30px;
}
.category-icon {
  margin-left: 15px;
  width: 20px;
  height: 18px;
  display: block;
}
.home {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  position: relative;
  padding-bottom: 50px;
}
.home-search {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  /* background-color: #e0e0e0; */
  align-items: center;

  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 15;
}
</style>
<style >
.swiper-pagination-bullet {
  box-sizing: border-box;
  border-radius: 7px;
  height: 6px;
  width: 6px;
  border: 1px solid #fff;
  margin: 0 4px;
  display: inline-block;
  opacity: 1;
  background: none;
  bottom: 27px;
}

.swiper-img {
  width: 100%;
  vertical-align: top;
}
.my-bullet-active {
  background-color: #fff;
}
</style>
